import { Link, NavLink, Outlet, useNavigate } from "react-router-dom";
import "./theme.css";
// import '@/记账本功能使用/mock'
function App() {
  const styleRoute = {
    display: "block",
    margin: "10px",
    width: "50px",
    height: "150px",
    border: "1px solid red",
    writingMode: "vertical-lr",
    textDecoration: "none",
  };
  const navigator = useNavigate();
  return (
    <div className="list">
      <Link to="/login">跳转到登录页</Link>
      <Link to="/article">跳转到文章列表列</Link>
      <button
        onClick={() => {
          navigator("/article");
        }}
      >
        编程时导航---文章页
      </button>
      <button
        onClick={() => {
          navigator("/login?name=zks&id=1001", {
            state: {
              meta: {
                name: "ZKS",
                Islogin: true,
              },
            },
          });
        }}
      >
        编程时导航---登录页传递参数query传参
      </button>

      <button
        onClick={() => {
          navigator("/article/10001/jack");
        }}
      >
        编程时导航---文章页传递参数params传参
      </button>

      {/* 嵌套路由 */}
      <Link
        to="/"
        style={{
          display: "block",
          margin: "5px",
          border: "1px solid #ccc",
          fontSize: "20px",
        }}
      >
        嵌套路由之联系人
      </Link>

      {/* <Link to="/about" style={styleRoute}>嵌套路由之关于</Link> */}

      {/* 从 v6.0.0-beta.3 开始， activeClassName 和 activeStyle 
    的属性已从 NavLinkProps 中移除。取而代之的是，
    您可以向 style 或 className 传递一个函数，(isactive,isPending，isTransitioning
    从而根据组件的活动状态自定义内联样式或类字符串。 */}
      <NavLink
        to="/about"
        style={({ isActive, isPending, isTransitioning }) => {
          console.log(isActive, isPending, isTransitioning);
          return isActive
            ? { color: "red", fontSize: "20px" }
            : { color: "blue", fontSize: "20px" };
        }}
      >
        嵌套路由之关于
      </NavLink>
      {/* 二级路由出口 */}
      <Outlet></Outlet>

      <Link
        to="/caseText"
        style={{
          display: "block",
          marginTop: "20px",
          color: "red",
          fontSize: "20px",
        }}
      >
        记账本案例
      </Link>
    </div>
  );
}

export default App;
